<template>
  <div class="border2">
    <h3>F 结点</h3>
    <button @click="getARef">获取A Ref</button>&nbsp;
    <button @click="getHRef">获取H Ref</button>
  </div>
</template>
<script>
export default {
  components: {},
  inject: {
    setChildrenRef: {
      // 注册子组件
      default: () => {}
    },
    getParentRef: {
      // 获取根组件实例
      from: 'getRef',
      default: () => {}
    },
    getParentChildrenRef: {
      // 获取根组件链下任何注册的子组件
      from: 'getChildrenRef',
      default: () => {}
    }
  },
  methods: {
    getARef() {
      console.log(this.getParentRef())
    },
    getHRef() {
      console.log(this.getParentChildrenRef('childrenH'))
      this.getParentChildrenRef('childrenH').innerText = 'H 结点改'
    }
  },
  mounted() {
    console.log(this.getParentChildrenRef('childrenH'))
  }
}
</script>
